<template>
  <div class="min-h-screen flex flex-col">
    <div class="flex items-center justify-center min-h-screen bg-gray-50">
      <div class="w-full max-w-md">
        <!-- 登录卡片 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
          <!-- 顶部标题区域 -->
          <div class="bg-emerald-600 text-white px-6 py-4">
            <div class="flex items-center justify-center space-x-2">
              <i class="fas fa-leaf text-2xl"></i>
              <h1 class="text-xl font-bold">营养师后台管理系统</h1>
            </div>
          </div>

          <!-- 登录表单 -->
          <div class="p-6">
            <h2 class="text-xl font-semibold text-gray-800 text-center mb-6">管理员登录</h2>
            
            <!-- 用户名输入 -->
            <div class="mb-4">
              <label class="block text-gray-700 text-sm font-medium mb-2" for="username">
                用户名
              </label>
              <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                  <i class="fas fa-user text-gray-400"></i>
                </span>
                <input id="username" type="text" class="pl-10 pr-4 py-2 w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" 
                  placeholder="请输入用户名" v-model="username">
              </div>
            </div>
            
            <!-- 密码输入 -->
            <div class="mb-6">
              <label class="block text-gray-700 text-sm font-medium mb-2" for="password">
                密码
              </label>
              <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                  <i class="fas fa-lock text-gray-400"></i>
                </span>
                <input id="password" :type="showPassword ? 'text' : 'password'" class="pl-10 pr-4 py-2 w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" 
                  placeholder="请输入密码" v-model="password">
                <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3" @click="togglePasswordVisibility">
                  <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'" class="text-gray-400"></i>
                </button>
              </div>
            </div>
            
            <!-- 记住我 & 忘记密码 -->
            <div class="flex items-center justify-between mb-6">
              <div class="flex items-center">
                <input id="remember-me" type="checkbox" class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 rounded" v-model="rememberMe">
                <label for="remember-me" class="ml-2 block text-sm text-gray-700">
                  记住我
                </label>
              </div>
              <a href="#" class="text-sm text-emerald-600 hover:text-emerald-800">忘记密码?</a>
            </div>
            
            <!-- 登录按钮 -->
            <div class="mb-4">
              <button @click="login" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 transition duration-150 ease-in-out" :disabled="isLoading">
                <i class="fas fa-sign-in-alt mr-2"></i>{{ isLoading ? '登录中...' : '登录' }}
              </button>
            </div>
            
            <!-- 错误提示 -->
            <div v-if="loginError" class="mb-4 p-3 bg-red-50 text-red-700 rounded-md text-sm flex items-start">
              <i class="fas fa-exclamation-circle mt-0.5 mr-2"></i>
              <span>{{ loginError }}</span>
            </div>
          </div>
          
          <!-- 底部版权信息 -->
          <div class="bg-gray-50 px-6 py-4 text-center text-xs text-gray-500">
            <p>&copy; 2023 健康饮食营养管理系统 版权所有</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'

export default {
  name: 'LoginView',
  setup() {
    const router = useRouter()
    const authStore = useAuthStore()
    const username = ref('')
    const password = ref('')
    const rememberMe = ref(false)
    const showPassword = ref(false)
    const loginError = ref('')
    const isLoading = ref(false)

    const togglePasswordVisibility = () => {
      showPassword.value = !showPassword.value
    }

    const login = async () => {
      // 重置错误信息
      loginError.value = ''
      
      // 简单的表单验证
      if (!username.value.trim()) {
        loginError.value = '请输入用户名'
        return
      }
      
      if (!password.value) {
        loginError.value = '请输入密码'
        return
      }
      
      try {
        isLoading.value = true
        // 调用auth store的登录方法
        const result = await authStore.login(username.value, password.value)
        
        if (result.success) {
          // 登录成功，跳转到首页
          router.push('/dashboard')
        } else {
          // 登录失败，显示错误信息
          loginError.value = result.message || '用户名或密码错误，请重试'
        }
      } catch (error) {
        console.error('登录异常:', error)
        loginError.value = '登录失败，请稍后再试'
      } finally {
        isLoading.value = false
      }
    }

    return {
      username,
      password,
      rememberMe,
      showPassword,
      loginError,
      isLoading,
      togglePasswordVisibility,
      login
    }
  }
}
</script>